import React, { Component } from 'react'
// Route 此组件用来定义路由规则和匹配成功后要渲染的组件 path component
// Route path=string component={类|router=>{}}
// Link, NavLink 声明式导航，编译成html都为a标签 NavLink有激活样式
import { Route, Link, NavLink, Switch } from 'react-router-dom'

// 导入路由规则匹配成功后要渲染的组件
import Home from './views/Home'
import About from './views/About'

class App extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            {/* to=string|{} 指定路由跳转的地址 */}
            {/* exact 精确匹配, 默认是模糊匹配 */}
            {/* <Link to="/home">首页</Link> */}
            {/* activeClassName 手动指定激活的样式名称，默认为active   ---  NavLink */}
            {/* <NavLink exact to="/"> */}
            <NavLink exact to={{ pathname: '/' }}>
              首页
            </NavLink>
          </li>
          <li>
            {/* <Link to="/about">关于</Link> */}
            <NavLink to="/about">关于</NavLink>
          </li>
        </ul>

        <hr />

        {/* 定义路由的规则和匹配成的组件 -- 在没有其它的路由组件包裹的情况下，匹配一直向下匹配，直到没有 */}
        {/* 匹配原则，模糊匹配, 如果让它精确匹配，需要添加一个属性exact */}
        {/* 
          Switch组件，包裹Route后，Route匹配规则就会改变，变成，匹配成功后就停止向下匹配 
          Switch使用后，一般不要用exact不要用了
          使用Switch组件后，路由的规则是精确写在前面，模糊写在后面
        */}
        {/* <Route exact path="/" component={Home} /> */}
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch>
      </div>
    )
  }
}

export default App
